<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Visibility</title>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        nav.clean {
            background: none;
            box-shadow: none;
        }

        .breadcrumb:before {
            color: rgba(0, 0, 0, 0.7);
        }

        .breadcrumb, .breadcrumb:last-child {
            color: rgba(0, 0, 0, 1);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="section">
        <nav class="clean">
            <div class="nav-wrapper">
                <div class="col s12">
                    <a href="#" class="breadcrumb" id="title-caption"></a>
                </div>
            </div>
        </nav>
    </div>
    <!-- <div class="divider"></div> -->
    <div class="section">
      <div class="row">
        <div class="col m4 s5" id="visible-caption">
        </div>
        <div class="col m8 s7" id="comment-caption">
        </div>
      </div>
      <div class="row">
        <div class="col m4 s5">
          <label>
            <input type="checkbox" class="filled-in" id="guest-visible"/>
            <span id="guest-label"></span>
          </label>
        </div>
        <div class="col m8 s7" id="guest-comment">
        </div>
      </div>
      <div class="row">
        <div class="col m4 s5">
          <label>
            <input type="checkbox" class="filled-in" id="disk-visible"/>
            <span id="disk-label"></span>
          </label>
        </div>
        <div class="col m8 s7" id="disk-comment">
        </div>
      </div>
      <div class="row">
        <div class="col m4 s5">
          <label>
            <input type="checkbox" class="filled-in" id="media-visible"/>
            <span id="media-label"></span>
          </label>
        </div>
        <div class="col m8 s7" id="media-comment">
        </div>
      </div>
    </div>
    <!-- <div class="divider"></div> -->
    <div class="section">
        <div class="row">
            <div class="col m2 right" id="button">
                <button class="waves-effect waves-light blue-grey lighten-2 btn" onclick="updateVisibility()" id="modify-caption">
                    <i class="material-icons right">build</i>
                </button>
            </div>
        </div>
    </div>

</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
    N.ValidateSession();
    var texts = N.GetTexts();

    function refresh(){
      loadVisibilities();
    }

    function loadVisibilities(){
      var queryURL = '/resource_visibilities/' + N.GetSessionID();
      $.getJSON(
        queryURL,
        function(result){
          if (0 != result['error_code']) {
            M.toast({html: 'load visibility fail:' + result['message']});
            return;
          }
          if (!result['data']){
            M.toast({html: 'no visibility data available'});
            return
          }
          var visibility = result['data'];
          if(visibility['instance_visible']){
            $('#guest-visible').prop('checked', true);
          }
          if(visibility['disk_image_visible']){
            $('#disk-visible').prop('checked', true);
          }
          if(visibility['media_image_visible']){
            $('#media-visible').prop('checked', true);
          }
        }
      );
    }

    function updateVisibility(){
      var request = new Object();
      request.instance_visible = $('#guest-visible').prop('checked');
      request.disk_image_visible = $('#disk-visible').prop('checked');
      request.media_image_visible = $('#media-visible').prop('checked');
      var requestURL = '/resource_visibilities/' + N.GetSessionID();
      $.ajax({
        url: requestURL,
        method: "PUT",
        dataType: "json",
        data: JSON.stringify(request),
        success: function (result) {
          if (0 != result['error_code']) {
            M.toast({html: 'update visibility fail:' + result['message']});
            return;
          }
          var groupName = N.GetCurrentGroup();
          M.toast({html: 'visibility updated'});
          setTimeout(refresh, 300);
          N.WriteOperateLog('update visibility of group ' + groupName);
        },
        error: function (jqXHR, status, error) {
          M.toast({html: 'request update visibility fail: ' + error, outDuration: 600});
        }
      });
    }

    $(function(){
      $('#title-caption').text(texts.get(N.TagVisibility));
      $('#modify-caption').append(texts.get(N.TagModify));
      M.AutoInit();

      if(N.IsChinese()){
        $('#visible-caption').text('组内资源可见性');
        $('#comment-caption').text('说明');
        $('#guest-label').text('云主机实例组内可见');
        $('#disk-label').text('磁盘镜像组内可见');
        $('#media-label').text('光盘镜像组内可见');
        $('#guest-comment').text('勾选后，用户可以查看同一组内其他用户创建的云主机实例，用户默认仅能查看自己创建的云主机实例。');
        $('#disk-comment').text('勾选后，用户可以查看同一组内其他用户创建的磁盘镜像，用户默认仅能查看自己创建的磁盘镜像。');
        $('#media-comment').text('勾选后，用户可以查看同一组内其他用户创建的光盘镜像，用户默认仅能查看自己创建的光盘镜像。');
      }else{
        $('#visible-caption').text('Group Resource Visibility');
        $('#comment-caption').text('Comment');
        $('#guest-label').text('Guests visible');
        $('#disk-label').text('Disk images Visible');
        $('#media-label').text('Media images visible');
        $('#guest-comment').text('User can browse instances created by other users in the same group when enabled. Otherwise, an instance is only visible to its creator by default.');
        $('#disk-comment').text('User can browse disk images created by other users in the same group when enabled. Otherwise, an image is only visible to its creator by default.');
        $('#media-comment').text('User can browse media images created by other users in the same group when enabled. Otherwise, an image is only visible to its creator by default.');
      }
      // M.Modal.init($('.modal'));
      loadVisibilities();
    });

</script>
</body>
</html>
